<template>
  <div class="map-card" :style="{ width, height, ...position }">
    <div class="card-title colorWhite">
      <img class="img" style="width: 18px; height: 18px" src="@/assets/imgs/icon-card-title.webp" alt="" />
      <div class="title">
        <slot name="title" />
      </div>
      <div class="sub-title">
        <slot name="sub-title" />
      </div>
    </div>
    <div class="card-cont">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    baseSet: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    height() {
      return this.baseSet.height || "290px";
    },
    width() {
      return this.baseSet.width || "490px";
    },
    position() {
      const { top, left, right, bottom } = Object.assign(
        {
          top: "auto",
          left: "auto",
          right: "auto",
          bottom: "auto",
        },
        this.baseSet
      );
      return {
        top,
        left,
        right,
        bottom,
        // inset: [top, right, bottom, left].join(" "),
      };
    },
  },
};
</script>

<style lang="less" scoped>
.map-card {
  background: url("~@/assets/imgs/card-bg.webp") no-repeat;
  background-size: 100% 100%;
  // border: 1px solid #ccc;
  padding: 20px 10px;
  position: fixed;
  .card-title {
    font-size: 20px;
    font-weight: 600;
    // overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 35px;
    position: relative;
    .img {
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
    }
    .title {
      // float: left;
    }
    .sub-title {
      // float: right;
    }
  }

  .card-cont {
    padding: 6px;

    .benefit {
      .benefit-item {
        .benefit-item-title {
        }
        .benefit-item-value {
          display: flex;
          font-weight: 700;
          div {
            margin: 0 5px;
            width: 20px;
            text-align: center;
            background-color: #065582;
          }
        }
      }
    }

    .scale-grain {
      .scale-grain-item {
        display: flex;
        justify-content: center;
        margin: 10px;
        .scale-grain-item-title,
        .scale-grain-item-value,
        .scale-grain-item-unit {
          width: 100px;
        }
        .scale-grain-item-value {
          background-color: #0b2447;
          span {
            display: inline-block;
            padding: 5px;
            background-color: #065482;
          }
        }
        .scale-grain-item-unit {
        }
      }
    }
  }
}
</style>
